<template>
    <div class="sys-topBtn">
        <div>
            <div class="ulNameBox" v-show="showInput">
                <div class="showInputClose">
                    <span @click=" showInput = false">x</span>
                </div>
                <Title style="margin-top:50px">
                    <slot>
                        <p style="margin-left:20px">
                            {{showInputTitle}}
                        </p>
                    </slot>
                </Title>
                <ul> 
                    <li>
                        <el-input
                            ref="saomaInput"
                            size="mini"
                            v-model="palletCode"
                            placeholder="请输入内容"
                        ></el-input>
                        <span>工作包器具编码：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="packageCode"
                        placeholder="请输入内容"
                        ></el-input>
                        <span>工作包编码：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="aoCode"
                        placeholder="请输入内容"
                        ></el-input>
                        <span>AO任务号：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="itemCode"
                        placeholder="请输入内容"
                        ></el-input>
                        <span>物料编码：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="itemQty"
                        placeholder="请输入内容"
                        ></el-input>
                        <span>数量：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="deliveryLocation"
                        placeholder="请输入内容"
                        ></el-input>
                        <span>配送位置：</span>
                    </li>
                </ul>
                <div style="text-align:center">
                    <el-button size="mini" type="primary" @click="confirmChangeInfoBtn">保存</el-button>
                    <el-button size="mini" type="primary" @click="showInput = false">取消</el-button>
                </div>
            </div>
            <div style="margin:5px 0">
                <el-button size="mini" type="primary" @click="addInfoBtn">新增</el-button>
                <el-button size="mini" type="primary" @click="changeInfoBtn">修改</el-button>
                <el-button size="mini" type="danger" @click="deleteInfoBtn">删除</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { sysToolMaterialInsert,sysToolMaterialUpdate,sysToolMaterialDelete } from "@/utils/api.js"
import Title from "../../../../../components/TableTitle.vue"
export default {
    name:'SysTopBtn',
    components:{
        Title
    },
    data(){
        return{
            // 操作弹窗
            showInput:false,
            // 弹窗title
            showInputTitle:'',
            msPackageMaterialId:'',
            palletCode:'',
            packageCode:'',
            aoCode:'',
            itemCode:'',
            itemQty:'',
            deliveryLocation:'',
            // 确认按钮内容
            btnValue:'',
            cheakInfo:[],
            deleteList:[]
        }
    },
    methods:{
        // 新增按钮 
        addInfoBtn(){
            this.showInput = true
            this.showInputTitle = '新增编辑'
            this.btnValue = '确认新增'
            // 清空所有input
            this.palletCode = ''
            this.packageCode = ''
            this.aoCode = ''
            this.itemCode = ''
            this.itemQty = ''
            this.deliveryLocation = ''
        },
        // 修改按钮
        changeInfoBtn(){
            // console.log(this.cheakInfo.length,this.cheakInfo)
            if(this.cheakInfo.length == 1){
                this.showInput = true
                this.showInputTitle = '修改编辑'
                this.btnValue = '确认修改';
                this.msPackageMaterialId = this.cheakInfo[0].msPackageMaterialId;
                this.palletCode = this.cheakInfo[0].palletCode;
                this.packageCode = this.cheakInfo[0].packageCode;
                this.aoCode = this.cheakInfo[0].aoCode;
                this.itemCode = this.cheakInfo[0].itemCode;
                this.itemQty = this.cheakInfo[0].itemQty;
                this.deliveryLocation = this.cheakInfo[0].deliveryLocation;
            }else {
                this.$Alert({
                    title: "失败",
                    message: '请勾选一条数据进行修改！',
                    type: "error",
                });
            }
        },
        // 确认按钮
        confirmChangeInfoBtn(){
            if(this.btnValue == '确认修改'){
                sysToolMaterialUpdate({
                    msPackageMaterialId:this.msPackageMaterialId,
                    palletCode:this.palletCode,
                    packageCode:this.packageCode,
                    aoCode:this.aoCode,
                    itemCode:this.itemCode,
                    itemQty:this.itemQty,
                    deliveryLocation:this.deliveryLocation,
                }).then((res)=>{
                    console.log('修改',res)
                    if(res.data.retCode == 200){
                        this.$Alert({
                            title: "成功",
                            message: res.data.message,
                            type: "success",
                        });
                        // 关闭弹窗
                        this.showInput = false
                        // 修改刷新Table并定位页数
                        this.$bus.$emit('sysTmRefreshTable','刷新')
                    }else {
                        this.$Alert({
                            title: "失败",
                            message: res.data.message,
                            type: "error",
                        });
                    }
                })
            }else if(this.btnValue == '确认新增'){
                sysToolMaterialInsert({
                    palletCode:this.palletCode,
                    packageCode:this.packageCode,
                    aoCode:this.aoCode,
                    itemCode:this.itemCode,
                    itemQty:this.itemQty,
                    deliveryLocation:this.deliveryLocation,
                }).then((res)=>{
                    if(res.data.retCode == 200){
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    // 关闭弹窗
                    this.showInput = false
                    // 修改刷新Table并定位页数
                    this.$bus.$emit('sysTmRefreshTable','刷新')
                    }else {
                        this.$Alert({
                            title: "失败",
                            message: res.data.message,
                            type: "error",
                        });
                    }
                })    
            }
            
        },
        // 删除按钮
        deleteInfoBtn(){
            sysToolMaterialDelete({
                msPackageMaterialId:this.deleteList
            }).then((res)=>{
                if(res.data.retCode == 200){
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    // 刷新Table并定位页数 
                    this.$bus.$emit('sysTmRefreshTable','刷新')
                }else {
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        }
    },
    mounted(){
      // 将勾选的数据信息给 TopBtn-修改按钮-删除按钮 
      this.$bus.$on('sysTmChange',(e)=>{
        this.cheakInfo = e
        console.log(e)
        this.deleteList = []
        for(let i=0;i<e.length;i++){
            this.deleteList.push(e[i].msPackageMaterialId)
        }
        // console.log(1111,this.cheakInfo)
        
      })
    }
}
</script>
<style scoped>
.sys-topBtn {
    width: 100%;
    /* overflow: hidden; */
}
.ulNameBox {
  position: relative;
  width: calc(100% - 200px);
  height: calc(100% - 60px);
  position: absolute;
  top: 60px;
  left: 200px;
  z-index: 99;
  background: white;
}
.showInputClose {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.ulNameBox ul {
  margin-top: 5px;
  overflow: hidden;   
}
.ulNameBox ul li {
  float: left;
  width: 21%;
  height: 30px;
  line-height: 30px;
  margin-right: 1%;
  margin-bottom: 5px;
  overflow: hidden;
}
.ulNameBox ul li span {
  float: right;
}
.ulNameBox ul li div {
  float: right;
}
.el-input {
    width: 130px;
}
</style>